let currentImageIndex = 0;
let imageUrls = [];
let zoomLevel = 1;  // 缩放级别，初始为 1
$(".jiazai").show();
$(function () {
    // 先清除可能已存在的图片
    $('.tp').empty();
    let keyword = $('#textSearch').val("衣服");
    $('#buttonSearch').click();
    $.post(port + 'tupian', { keyword }, function (data) {
        data = JSON.parse(data);
        $(".jiazai").hide();
        for (let i = 0; i < data.length; i++) {
            let img = `
                <div class="photo-item">
                    <img src="${data[i]}" alt="" onclick="showPhoto('${data[i]}')" class="tupian">
                </div>`;
            $('.tp').append(img);
            imageUrls.push(data[i]);
        }
    })
})

$('#buttonSearch').click(function () {
    $(".jiazai").show();
    $(".tp").empty();
    imageUrls = [];
    let keyword = $('#textSearch').val();
    $.post(port + 'tupian', { keyword }, function (data) {
        data = JSON.parse(data);
        console.log(data);
        if (data.code != 200) return;
        $(".jiazai").hide();
        if (data.module.length == 0) {
            alert("没有找到相关图片");
            $(".tp").html(`<h2 style="margin:300px auto;">没有找到相关图片</h2>`);
            $('#textSearch').val(" ");
            return;
        }
        for (let i = 0; i < data.module.length; i++) {
            let img = `
                <div class="photo-item">
                    <img src="${data.module[i]}" alt="" onclick="showPhoto('${data.module[i]}')" class="tupian">
                </div>`;
            $('.tp').append(img);
            imageUrls.push(data.module[i]);
        }
    })
});

function showPhoto(src) {
    if ($('.photo-modal').css('display') == 'none') {
        $('.photo-modal').show();
        $(".zzhao").show();
        currentImageIndex = imageUrls.indexOf(src);
        let pimage = `
        <div><img src="/image/cha.png" alt="" class="cha"></div>
        <div>
                <span><img src="/image/zuoyoujian.png" alt="" class="zuojiantou"></span>
                <div><img src="${src}" alt="" class="tupian_show"></div>
                <span><img src="/image/zuoyoujian_1.png" alt="" class="youjiantou"></span>
                </div>
            `;
        $('.photo-modal').html(pimage);
    }
    dj();
}

function dj() {
    $(".cha").click(function () {
        $(".photo-modal").hide();
        $(".zzhao").hide();
    });

    $(".zuojiantou").click(function () {
        if (currentImageIndex > 0) {
            currentImageIndex--;
            $('.tupian_show').attr('src', imageUrls[currentImageIndex]);
        } else {
            alert("已经是第一张了");
        }
    });

    $(".youjiantou").click(function () {
        if (currentImageIndex < imageUrls.length - 1) {
            currentImageIndex++;
            $('.tupian_show').attr('src', imageUrls[currentImageIndex]);
        } else {
            alert("已经是最后一张了");
        }
    });

    // 为当前显示的图片添加鼠标滚轮缩放事件
    $('.tupian_show').on('mousewheel', function (e) {
        e.preventDefault();
        if (e.originalEvent.deltaY > 0) {  // 鼠标滚轮向下滚动
            if (zoomLevel > 1) {  // 限制最小缩放级别
                zoomLevel -= 0.1;
                $(this).css('transform', `scale(${zoomLevel})`);
            }
        } else {  // 鼠标滚轮向上滚动
            if (zoomLevel < 4) {  // 限制最大缩放级别
                zoomLevel += 0.1;
                $(this).css('transform', `scale(${zoomLevel})`);
            }
        }
    });
}